<template>
	<el-dialog title="角色权限设置" v-model="visible" :width="1200" destroy-on-close @closed="$emit('closed')">
		<el-tabs tab-position="top">
			<el-tab-pane label="菜单权限">
				<div class="treeMain">
					<el-tree ref="menu" node-key="id" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane label="字段权限">
				<div v-for="(item,key) in column_list" :key="key">
					<el-text size="large" tag="b" style="font-weight: 600">{{item.name}}</el-text>
					<el-checkbox-group v-model="checkedColumns">
						<el-checkbox v-for="(column,index) in item.columnlist" :key="index" :label="column.id">{{column.column_name}}</el-checkbox>
					</el-checkbox-group>
				</div>

			</el-tab-pane>
			<el-tab-pane label="小程序权限">
				<div class="treeMain">
					<el-tree ref="minimenu" node-key="id" :data="minimenu.list" :props="minimenu.props" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
<!--			<el-tab-pane label="数据权限">-->
<!--				<el-form label-width="100px" label-position="left">-->
<!--					<el-form-item label="规则类型">-->
<!--						<el-select v-model="data.dataType" placeholder="请选择">-->
<!--							<el-option label="全部可见" value="1"></el-option>-->
<!--							<el-option label="本人可见" value="2"></el-option>-->
<!--							<el-option label="所在部门可见" value="3"></el-option>-->
<!--							<el-option label="所在部门及子级可见" value="4"></el-option>-->
<!--							<el-option label="选择的部门可见" value="5"></el-option>-->
<!--							<el-option label="自定义" value="6"></el-option>-->
<!--						</el-select>-->
<!--					</el-form-item>-->
<!--					<el-form-item label="选择部门" v-show="data.dataType == '5'">-->
<!--						<div class="treeMain" style="width: 100%;">-->
<!--							<el-tree ref="dept" node-key="id" :data="data.list" :props="data.props" show-checkbox></el-tree>-->
<!--						</div>-->
<!--					</el-form-item>-->
<!--					<el-form-item label="规则值" v-show="data.dataType == '6'">-->
<!--						<el-input v-model="data.rule" clearable type="textarea" :rows="6" placeholder="请输入自定义规则代码"></el-input>-->
<!--					</el-form-item>-->
<!--				</el-form>-->
<!--			</el-tab-pane>-->
<!--			<el-tab-pane label="控制台模块">-->
<!--				<div class="treeMain">-->
<!--					<el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>-->
<!--				</div>-->
<!--			</el-tab-pane>-->
<!--			<el-tab-pane label="控制台">-->
<!--				<el-form label-width="100px" label-position="left">-->
<!--					<el-form-item label="控制台视图">-->
<!--						<el-select v-model="dashboard" placeholder="请选择">-->
<!--							<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">-->
<!--								<span style="float: left">{{ item.label }}</span>-->
<!--								<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>-->
<!--							</el-option>-->
<!--						</el-select>-->
<!--						<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>-->
<!--					</el-form-item>-->
<!--				</el-form>-->
<!--			</el-tab-pane>-->
		</el-tabs>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			isIndeterminate:true,
			visible: false,
			isSaveing: false,
			role_id: '',
			menu: {
				list: [],
				checked: [],
				props: {
					label: (data) => {
						return data.title
					}
				}
			},
			minimenu: {
				list: [],
				checked: [],
				props: {
					label: (data) => {
						return data.title
					}
				}
			},
			grid: {
				list: [],
				checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
				props: {
					label: (data) => {
						return data.title
					},
					disabled: (data) => {
						return data.isFixed
					}
				}
			},
			data: {
				dataType: "1",
				list: [],
				checked: [],
				props: {},
				rule: "",
			},
			dashboard: "0",
			dashboardOptions: [
				{
					value: '0',
					label: '数据统计',
					views: 'stats'

				},
				{
					value: '1',
					label: '工作台',
					views: 'work'
				},
			],
			column_list:[],
			checkedColumns:[]
		}
	},
	mounted() {
		this.getMenu()
		this.getMiniMenu()
		this.getDept()
		this.getGrid()
		this.getColumn()
	},
	methods: {
		open() {
			this.visible = true;
		},
		async submit() {
			this.isSaveing = true;

			//选中的和半选的合并后传值接口
			var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
			var checkedMiniKeys = this.$refs.minimenu.getCheckedKeys().concat(this.$refs.minimenu.getHalfCheckedKeys())

			// var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
			// console.log(checkedKeys_dept)
			var res = await this.$API.system.role.set_permission.post({ id: this.role_id, menu_id: checkedKeys,column_id:this.checkedColumns,mini_menu_id:checkedMiniKeys })
			if (res.code == 1) {
				this.isSaveing = false;
				this.visible = false;
				this.$message.success("操作成功")
				this.$emit('success')
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		async getMenu() {
			var res = await this.$API.system.menu.all.get()
			this.menu.list = res.data
			//获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
			var myMenus = await this.$API.system.menu.checkall.get({ role_id: this.role_id })
			this.menu.checked = myMenus.data
			this.$nextTick(() => {
				if (this.menu.checked.length > 0) {
					let filterKeys = this.menu.checked.filter(key => this.$refs.menu.getNode(key).isLeaf)
					this.$refs.menu.setCheckedKeys(filterKeys, true)
				}
			})
		},
		async getMiniMenu() {
			var res = await this.$API.system.miniMenu.all.get()
			this.minimenu.list = res.data
			//获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
			var myMenus = await this.$API.system.miniMenu.checkall.get({ role_id: this.role_id })
			this.minimenu.checked = myMenus.data
			this.$nextTick(() => {
				if (this.minimenu.checked.length > 0) {
					let filterKeys = this.minimenu.checked.filter(key => this.$refs.minimenu.getNode(key).isLeaf)
					this.$refs.minimenu.setCheckedKeys(filterKeys, true)
				}
			})
		},
		async getColumn() {
			var res = await this.$API.system.menu.allColumn.get()
			this.column_list = res.data

			var myColumn = await this.$API.system.menu.checkColumnAll.get({ role_id: this.role_id })
			this.checkedColumns = myColumn.data
		},
		async getDept() {
			// var res = await this.$API.system.dept.list.get();
			// this.data.list = res.data
			// this.data.checked = ["12", "2", "21", "22", "1"]
			// this.$nextTick(() => {
			// 	let filterKeys = this.data.checked.filter(key => this.$refs.dept.getNode(key).isLeaf)
			// 	this.$refs.dept.setCheckedKeys(filterKeys, true)
			// })
		},
		getGrid() {
			this.grid.list = [
				{
					key: "welcome",
					title: "欢迎",
					isFixed: true
				},
				{
					key: "ver",
					title: "版本信息",
					isFixed: true
				},
				{
					key: "time",
					title: "时钟"
				},
				{
					key: "progress",
					title: "进度环"
				},
				{
					key: "echarts",
					title: "实时收入"
				},
				{
					key: "about",
					title: "关于项目"
				}
			]
		}
	}
}
</script>

<style scoped>
.treeMain {
	height: 280px;
	overflow: auto;
	border: 1px solid #dcdfe6;
	margin-bottom: 10px;
}</style>
